<template>
	<view class="liveRoom">
		<live-player autoplay="true" :src="liveData.play_url.RTMP" mode="live" class="liveRoom-video" object-fit="fillCrop"></live-player>
		<!-- <image :src="liveData.head_pic" class="liveRoom-video" mode=""></image> -->
		<view class="liveRoom-box">
			<!-- 小喇叭消息通知 -->
			<view class="notice">
				<u-notice-bar mode="horizontal" :list="list" :show="is_noticeShow"  border-radius="40"></u-notice-bar>
			</view>
			
			<view class="header">
				<view class="live-data">
					<image :src="liveData.head_pic" mode=""></image>
					<view class="live-txt">
						<view class="live-name">
							{{liveData.live_man}}
						</view> 
						<view class="live-look-num">
							在线观看 {{liveData.views_number}}
						</view>
					</view>
				</view>
				<view class="live-btn">
					<view class="tag">
						<text>翡翠有品</text>
						<text>ID：{{liveData.live_program_id}}</text>
					</view>
					<view class="off">
						<u-icon name="close" color="rgba(0,0,0,0)" size="30"></u-icon>
					</view>
				</view>
			</view>
			<view class="header-plate-2">
				<view class="item">
					<u-icon name="level" color="#fff" size="30"></u-icon>
					<view class="item-txt" @click="levelShow = true">
						<text>直播等级</text>
						<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
					</view>
				</view>
				<view class="item" @click="commentShow = true">
					<u-icon name="more-circle" color="#fff" size="30"></u-icon>
					<view class="item-txt">
						<text>买家评价</text>
						<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="swiper-box">
				<swiper  :duration="100" current="1">
					<!-- 直播攻略页面 -->
					<swiper-item>
						<view class="swiper-item">
							<view class="strategy">
								<view class="strategy-plate-1">
									<view class="title">
										<view class="title-left">
											<u-icon name="info" color="#fff" size="30"></u-icon>
											<text>{{liveData.real_watch}}人观看中</text>
										</view>
										<navigator url="../common/strategy/strategy" open-type="navigate" hover-class="none">
											<view class="title-right">
												购买攻略
											</view>
										</navigator>
									</view>
									<view class="content">
										{{liveData.live_title}}
									</view>
									<view class="btm">
										<u-icon name="account-fill" color="#666666" size="50"></u-icon>
										<text>{{liveData.attention_num}}人已关注</text>
									</view>
								</view>
								<view class="strategy-plate-2">
									<view class="title">
										直播简介
									</view>
									<view class="content">
										{{liveData.live_describtion}}
									</view>	
								</view>
								<view class="strategy-plate-3">
									<view class="title">
										活动说明
									</view>
									<view class="content">
										{{liveData.intro}}
									</view>	
								</view>
								
							</view>
						</view>
					</swiper-item>
					<!-- 直播互动页面 -->
					<swiper-item>
						<view class="swiper-item">
							<view class="interact">
								<view class="goInto" v-show="is_goInto">
									<view class="txt">
										欢迎<text>{{otherNike}}</text>进入直播间
									</view>
								</view>
								<scroll-view class="message-box" scroll-y="true" :scroll-into-view="scroll_id">

									<view class="item" v-for="(item,index) in messageList" :key="index" v-if="item.type == 'TIMTextElem'&&item.data.type == 3" :id="'msg' + item.sequence">
										<!-- 等级 -->
										<image src="../../static/xiaobai.png" mode="widthFix" v-if="item.data.level == 1"></image>
										<image src="../../static/xinshou.png" mode="widthFix" v-if="item.data.level == 2"></image>
										<image src="../../static/xuezhe.png" mode="widthFix" v-if="item.data.level == 3"></image>
										<image src="../../static/daka.png" mode="widthFix" v-if="item.data.level == 4"></image>
										<image src="../../static/hangjia.png" mode="widthFix" v-if="item.data.level == 5"></image>
										<image src="../../static/zishen.png" mode="widthFix" v-if="item.data.level == 6"></image>
										<image src="../../static/zhuanjia.png" mode="widthFix" v-if="item.data.level == 7"></image>
										<image src="../../static/dashi.png" mode="widthFix" v-if="item.data.level == 8"></image>
										<image src="../../static/mingxing.png" mode="widthFix" v-if="item.data.level == 9"></image>
										<!-- 昵称 -->
										<text>{{item.data.name}}</text>
										<!-- 消息 -->
										<text>{{item.data.content}}</text>
									</view>
								</scroll-view>
								<view class="btm-box">
									<view class="btm-box-img">
										<image :src="shopImg" mode="" @click="onGoodsList"></image>
										<view class="num" v-if="goods_list.length !== 0">
											{{goods_list.length}}
										</view>
									</view>
									<view class="input-box" @click="inputShow = true">
										<u-icon name="chat" color="#fff" size="40"></u-icon>
										<text>说点什么吧</text>
									</view>
									<view class="item-box">
										<button class="item" open-type="share">
											<u-icon name="share-fill" color="#fff" size="40"></u-icon>
										</button>
										<text>分享</text>
									</view>
									<view class="item-box">
											<view class="item" @click="goIM(liveData.service_im_account)">
												<u-icon name="kefu-ermai" color="#fff" size="40"></u-icon>
											</view>
										<text>客服</text>
									</view>
									<view class="item-box" @click="onLike">
										<view class="item">
											<u-icon name="thumb-up-fill" :color="likeColor" size="40"></u-icon>
										</view>
										<text>{{likeNum}}</text>
									</view>
								</view>
							</view>

						</view>
					</swiper-item>
					<!-- 空白页面 -->
					<swiper-item>
						<view class="swiper-item">
							<!-- 空白 -->
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 弹窗区域 -->
			<!-- 直播等级 -->
		<u-popup v-model="levelShow" mode="bottom" safe-area-inset-bottom="true">
			<view class="level-box">
				<!-- 当前等级 -->
				<view class="level-plate-1">
					<view class="top">
						<text>当前等级</text>
						<navigator url="../mine/mineLevel/mineLevel" open-type="navigate" hover-class="none">
							<button class="border-btn">等级说明</button>
						</navigator>
					</view>
					<view class="center">
						<image src="../../static/xiaobai.png" mode="widthFix" v-if="userData.level == 1"></image>
						<image src="../../static/xinshou.png" mode="widthFix" v-if="userData.level == 2"></image>
						<image src="../../static/xuezhe.png" mode="widthFix" v-if="userData.level == 3"></image>
						<image src="../../static/daka.png" mode="widthFix" v-if="userData.level == 4"></image>
						<image src="../../static/hangjia.png" mode="widthFix" v-if="userData.level == 5"></image>
						<image src="../../static/zishen.png" mode="widthFix" v-if="userData.level == 6"></image>
						<image src="../../static/zhuanjia.png" mode="widthFix" v-if="userData.level == 7"></image>
						<image src="../../static/dashi.png" mode="widthFix" v-if="userData.level == 8"></image>
						<image src="../../static/mingxing.png" mode="widthFix" v-if="userData.level == 9"></image>
						<view class="center-right">
							<text>距离升级还差{{userData.grade_empirical_diff}}经验值</text>
							<view class="level-num-bg">
								<view class="level-num" :style="'width: '+ userData.grade_empirical_diff/userData.grade_empirical_current +'%;'">
									
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 每日任务 -->
				<scroll-view class="task-plate-2" scroll-y="true">
					<view class="scroll-box">
						<view class="title">
							每日任务
						</view>
						<view class="item" v-for="(item,index) in taskData">
							<view class="item-left">
								<image src="../../static/time1.png" mode="widthFix"></image>
								<view class="txt">
									<text>{{item.path_name}}</text>
									<text>+{{item.empirical_value}}经验值</text>
								</view>
							</view>
							<!-- 状态 -->
							<view class="item-right" v-if="item.is_complete == 0">
								未完成
							</view>
							<view class="item-right" v-else>
								已完成
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
			<!-- 买家评价 -->
		<u-popup v-model="commentShow" mode="bottom" safe-area-inset-bottom="true">
			<view class="comment-box">
				<view class="title">
					买家评价（{{commentData.overall_evaluate3 + commentData.overall_evaluate2 + commentData.overall_evaluate1}}）
				</view>
				<view class="tags">
					<view class="tag-item" :class="activeIndex == 3? 'tag-item-active':''" @click="onTagChange(3)">
						好评（{{commentData.overall_evaluate3}}）
					</view>
					<view class="tag-item" :class="activeIndex == 2? 'tag-item-active':''" @click="onTagChange(2)">
						中评（{{commentData.overall_evaluate2}}）
					</view>
					<view class="tag-item" :class="activeIndex == 1? 'tag-item-active':''" @click="onTagChange(1)">
						差评（{{commentData.overall_evaluate1}}）
					</view>
					<view class="tag-item" :class="activeIndex == 4? 'tag-item-active':''" @click="onTagChange(4)">
						有图（{{commentData.evaluate_pic}}）
					</view>
				</view>
				<scroll-view class="comment-list"  scroll-y="true" @scrolltolower="onPageAdd" lower-threshold="200">
					<view class="comment-item" v-for="(item,index) in commentList" :key="index">
						<view class="item-top">
							<image :src="item.head_pic" mode=""></image>
							<text>{{item.nickname}}</text>
							<u-rate :count="count" v-model="item.goods_evaluate" active-color="#D1AA56" disabled="true"></u-rate>
						</view>
						<view class="item-center">
							{{item.evaluate_content}}
						</view>
						<view class="goods">
							<image :src="item.goods_pic" mode=""></image>
							<view class="goods-name">
								<text>{{item.goods_name}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
			<!-- 抢购商品 -->
		<u-popup v-model="goodsShow" mode="bottom" safe-area-inset-bottom="true" >
			<view class="goods-title">
				抢购商品
			</view>
			<scroll-view class="goods-box" scroll-y="true" @scrolltolower="onPageGoods"  lower-threshold="200">
				<view class="item" v-for="(item,index) in goods_list" :key="index">
					<image :src="item.goods_pic_one" mode=""  @click="goGoodsDetail(item.goods_id)"></image>
					<view class="item-right">
						<view class="name" @click="goGoodsDetail(item.goods_id)">
							{{item.goods_name}}
						</view>
						<view class="desc" @click="goGoodsDetail(item.goods_id)">
							{{item.goods_sub_describition}}
						</view>
						<view class="tags" @click="goGoodsDetail(item.goods_id)">
							<u-tag :text="i" type="warning" style="margin-right: 8upx;margin-bottom: 8upx;"  size="mini" v-for="(i,iInedex) in item.label_names" :key="iInedex"></u-tag>
						</view>
						<view class="old-price" @click="goGoodsDetail(item.goods_id)">
							¥{{item.sub_prices}}
						</view>
						<view class="goods-btm">
							<text>{{item.goods_prices}}</text>
							<view class="goods-btm-right">
								<image src="@/static/ic_buycar_round.png" mode="widthFix" @click="onAddCart(item.goods_id)"></image>
								<button class="bg-btn" @click="goSubmitOrder(item.goods_id)">马上抢</button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>
		<!-- 输入框 -->
		<u-popup  v-model="inputShow" mode="bottom" safe-area-inset-bottom="true" :mask="false">
			<view class="input-txt">
				<scroll-view class="tags-txt"  scroll-x="true">
					<view class="tag-txt" v-for="(item,index) in commentMode" :key="index" @click="onTxtTag(item)">
						{{item}}
					</view>
				</scroll-view>
				<input type="text" v-model="msgContent" placeholder="跟主播说点什么吧"  @confirm.stop="onMessage" />
			</view>
		</u-popup>
		<!-- 弹窗区域 -->
		<u-popup v-model="passWordShow" mode="center" border-radius="20" :closeable="true" close-icon-color="#fff" :mask-close-able="false">
			<view class="password-box">
				<view class="title">
					输入直播间密码
				</view>
				<input type="passwrod" v-model="passwrod" />
				<view class="btm-btn">
					<view class="quxiao btn" @click="onBack">
						取消
					</view>
					<view class="queding btn" @click="onDetermine">
						确定
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// 引入im
	import TIM from 'tim-wx-sdk';
	import COS from "cos-wx-sdk-v5";
	export default {
		data() {
			return {
				id:0,
				liveData:'',//直播数据
				shopImg:this.$ImgUrl + '/public/upload/au_pic/ic_buy_item.png',
				likeColor:'#fff',
				likeNum:0,
				levelShow:false,
				userData:'',
				taskData:'',
				commentShow:false,
				activeIndex:3,
				count:5,//星星数量
				page:1,
				commentData:'',
				commentList:[],
				goodsShow:false,
				goodsPage:1,
				goods_list:[],
				inputShow:false,
				commentMode:[],
				messageList:[],
				GroupId:'',
				msgContent:'',
				scroll_id:'',
				is_goInto:false,
				otherNike:'',
				//页面需要传递的参数
				avatar:'',
				nickName:'',
				messageArr:'',
				list: [],
				is_noticeShow:false,
				passWordShow:false,
				passwrod:'',
				is_get:0
			};
		},
		onUnload() { //登陆退出
			this.getUserOut()
			this.onQuitGroup()
		},
		onLoad(option) {
			this.id = option.id
			this.getUserLogin()
			this.getGoodsList()
			if (option.avatar !== undefined) {
				this.avatar = option.avatar
				this.nickName = option.nickName
			}
		},
		onShow() {
			this.getLiveDetail()
			this.getCommentList()
			setTimeout(()=>{
				this.getJoinGroup()
				this.setMessage()
			},1200)
		},
		//分享监听
		onShareAppMessage(res) {
			if(res.form === 'menu'){
				
			}
			return{
				title:this.liveData.live_title,
				path:'/pages/home/liveRoom?id='+this.id+'&nickName='+uni.getStorageSync('userInfo').nickname+'&avatar='+uni.getStorageSync('userInfo').head_pic,
				imageUrl:this.liveData.live_head_pic,
				success(res){
					uni.showToast({
					    title:'转发成功',
					    icon:'none',
					    duration:1200
					})
				},
				fail(){
					uni.showToast({
					    title:'转发失败',
					    icon:'none',
					    duration:1200
					})
				}
			}
		},
		created() {
			this.getLevelData()
			this.getCommentTags()
		},
		methods:{
			// 返回上一个页面
			onBack(){
				uni.navigateBack({
					delta:1
				})
			},
			// 确定输入密码
			onDetermine(){
				this.getLiveDetail(this.passwrod)
				setTimeout(()=>{
					if (this.is_get == 1) {
						this.getUserLogin()
						this.getGoodsList()
						this.getCommentList()
						this.getJoinGroup()
						this.setMessage()
						this.getLevelData()
						this.getCommentTags()
					} else{
						uni.showToast({
							title:'密码错误',
							icon:'none'
						})
						this.passwrod = ''
					}
				},1000)
			},
			// 退出群组
			onQuitGroup(){
				let promise = this.$tim.quitGroup(this.GroupId);
				promise.then((imResponse)=> {b 
				  // console.log(imResponse.data.groupID); // 退出成功的群 ID
				  console.log('退出群组成功')
				}).catch((imError)=>{
				  // console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
				  console.log('退出群组失败')
				});
			},
			// 修改自身群名片
			onRename(){
				let promise = this.$tim.setGroupMemberNameCard({ groupID: this.GroupId, userID: uni.getStorageSync('im_account'), nameCard: uni.getStorageSync('userInfo').nickname });
				promise.then((imResponse)=> { //修改成功
					console.log('修改成功')
				  console.log(imResponse.data.member); // 修改后的群成员资料
				}).catch((imError)=> {
					console.log('修改失败')
				  console.warn('setGroupMemberNameCard error:', imError); // 设置群成员名片失败的相关信息
				});
			},
			// 进入页面请求
			getUserLogin(){
				uni.request({
				    url:'https://fei.feicuikuang.com/index.php/App/Live/join',
				    method:'POST',
				    data:{
				       userId:uni.getStorageSync('userInfo').user_id,
					   roomId:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       console.log(res);
				    }
				})
			},
			// 退出页面需要请求的接口
			getUserOut(){
				uni.request({
				    url:'https://fei.feicuikuang.com/index.php/App/Live/quit',
				    method:'POST',
				    data:{
				       userId:uni.getStorageSync('userInfo').user_id,
					   roomId:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
				       console.log(res);
				    }
				})
			},
			// 前往IM
			goIM(id){
				this.onQuitGroup()
				let promise = this.$tim.quitGroup(this.GroupId);
				promise.then((imResponse)=> {
					uni.navigateTo({
						url:'../common/IM/IM?id=' + id
					})
				}).catch(function(imError){
				  console.warn('quitGroup error:', imError); // 退出群组失败的相关信息
				});
			},
			// 定位到最后一条信息
			onPosion(){
				this.$nextTick(() => {
					let lng = this.messageList.length
					this.scroll_id = 'msg' + this.messageList[lng - 1].sequence
				})
			},
			// 发送快捷输入
			onTxtTag(text){
				this.msgContent = text
				this.onMessage()
				this.onPosion()
			},
			// 进入直播间
			goIntoRoom(){
				let obj = {
					content:'',
					level:0,
					name:uni.getStorageSync('userInfo').nickname,
					type:1
				}
				// 创建文本消息
				let message = this.$tim.createTextMessage({
					to: this.GroupId,
					conversationType: TIM.TYPES.CONV_GROUP,
					payload: {
						text: JSON.stringify(obj)
					}
				})
				// 2. 发送消息
				let promise = this.$tim.sendMessage(message);
				promise.then((res) => {
					console.log('进入群组')
				}).catch((err) => {
					// 发送失败
					console.warn('发送失败', err);
				});
			},
			// 申请加入群组
			getJoinGroup(){
				let promise = this.$tim.joinGroup({ groupID: this.GroupId, type: TIM.TYPES.GRP_AVCHATROOM });
				promise.then((imResponse)=> {
				  switch (imResponse.data.status) {
				    case TIM.TYPES.JOIN_STATUS_WAIT_APPROVAL: // 等待管理员同意
				      break;
				    case TIM.TYPES.JOIN_STATUS_SUCCESS: // 加群成功
				      console.log('加入成功'); // 加入的群组资料
					  this.goIntoRoom() //进入直播间
					  this.onRename()
				      break;
				    case TIM.TYPES.JOIN_STATUS_ALREADY_IN_GROUP: // 已经在群中
				      break;
				    default:
				      break;
				  }
				}).catch(function(imError){
				  console.warn('joinGroup error:', imError); // 申请加群失败的相关信息
				});
			},
			//发送消息
			onMessage() {
				let obj = {
					content:this.msgContent,
					level:this.userData.level,
					name:uni.getStorageSync('userInfo').nickname,
					type:3
				}
				// 创建文本消息
				let message = this.$tim.createTextMessage({
					to: this.GroupId,
					conversationType: TIM.TYPES.CONV_GROUP,
					payload: {
						text: JSON.stringify(obj)
					}
				})
				// 2. 发送消息
				let promise = this.$tim.sendMessage(message);
				promise.then((res) => {
					// 发送成功
					this.messageList.push({
						data:JSON.parse(res.data.message.payload.text),
						type:res.data.message.type,
						sequence:res.data.message.sequence
					})
					this.inputShow = false
					this.msgContent = ''
					this.onPosion()
					
				}).catch((err) => {
					// 发送失败
					console.log(err)
					this.msgContent = ''
					uni.showToast({
					    title:'您已被禁言',
					    icon:'none',
					    duration:1200
					})
				});
			
			},
			
			// 群聊消息分配方法
			setMessage(){
				this.$tim.on(TIM.EVENT.MESSAGE_RECEIVED, (event) => {
					// 外部js赋值
					console.log(event)
					let msgArr = []
					let arr = []
					let obj = {}
					
					for (let i = 0; i < event.data.length; i++) {
						msgArr = msgArr.concat(event.data[i])
						if(event.data[i].conversationType == 'C2C'){
							let num = parseInt(uni.getStorageSync('msgNum'))
							num ++ 
							uni.setStorageSync('msgNum',num)
						}
					}
					for (var n = 0; n < msgArr.length; n++) {
						if(msgArr[n].payload.text == undefined){
							obj = '进入直播间'
						}else{
							obj = JSON.parse(msgArr[n].payload.text)
						}
						if(obj.type == 11){
							this.likeNum = obj.content
						}
						if(obj.type == 6){
							uni.switchTab({
								url:'home'
							})
						}
						if(obj.type == 4){
							let str = ''
							str = obj.content + obj.title
							let arr = []
							this.list = arr.concat(str)
							this.is_noticeShow = true
							setInterval(()=>{
								this.is_noticeShow = false
							},30000)
						}
						if(msgArr[n].type == "TIMGroupTipElem"){ //新人进入直播间
							// this.is_goInto = false
							this.otherNike = msgArr[n].nick
							this.is_goInto = true
							this.liveData.views_number++
							setInterval(()=>{
								this.is_goInto = false
							},1600)
						}
						arr.push({
							data:obj,
							type:msgArr[n].type,
							sequence:msgArr[n].sequence
						})
					}
					this.messageList = this.messageList.concat(arr)
					this.onPosion()
				})

			},
			// 请求直播发言模板
			getCommentTags(){
				uni.request({
				    url:this.$Url +'/index.php/app/live/liveSpeakModule',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.commentMode = res.data.data
						} else{
							uni.showToast({
							    title:res.data.msg,
							    icon:'none',
							    duration:1200
							})
						}
				    }
				})
			},
			// 前往确认订单
			goSubmitOrder(id){
				uni.removeStorageSync('old_data')
				uni.navigateTo({
					url:'../common/shop/goodsDetail/submitOrder/submitOrder?id=' + id + '&type=1'
				})
			},
			// 加入购物车
			onAddCart(id){
				uni.request({
				    url:this.$Url +'/index.php/app/Cart/addCart',
				    method:'POST',
				    data:{
				       live_program_id:this.id,
					   goods_id:id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 前往产品详情
			goGoodsDetail(id){
				uni.navigateTo({
					url:'../common/shop/goodsDetail/goodsDetail?id=' + id
				})
			},
			// 商品翻页
			onPageGoods(){
				this.goodsPage ++
				this.getGoodsList()
			},
			// 打开商品列表
			onGoodsList(){
				this.goodsShow = true
			},
			// 请求直播商品
			getGoodsList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Goods/goodsList',
				    method:'POST',
				    data:{
				       live_program_id:this.id,
					   p:this.goodsPage
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.goods_list = this.goods_list.concat(res.data.data.goods_list)
						}
				    }
				})
			},
			// 上拉加载
			onPageAdd(){
				this.page ++
				this.getCommentList()
			},
			// 请求评价列表
			getCommentList(){
				uni.request({
				    url:this.$Url +'/index.php/App/Goods/getEvaluateList',
				    method:'POST',
				    data:{
				       p:this.page,
					   good_type:this.activeIndex,
					   anchor_id:this.id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.commentData = res.data.data
							this.commentList = this.commentList.concat(res.data.data.evaluate_list)
						} else{
							uni.showToast({
							    title:res.data.msg,
							    icon:'none',
							    duration:1200
							})
						}
				    }
				})
			},
			// 点击评价分类
			onTagChange(num){
				this.activeIndex = num
				this.page = 1
				this.commentList = []
				this.getCommentList()
			},
			// 请求直播等级数据
			getLevelData(){
				uni.request({
				    url:this.$Url +'/index.php/App/Users/myEmpiricalMes',
				    method:'POST',
				    data:{
				       
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.userData = res.data.data
							this.taskData = res.data.data.empirical_path
						} else{
							uni.showToast({
							    title:res.data.msg,
							    icon:'none',
							    duration:1200
							})
						}
				    }
				})
			},
			// 点赞
			onLike(){
				if(this.liveData.is_like_status == 0){
					uni.request({
					    url:this.$Url +'/index.php/App/Live/changeLikeNum',
					    method:'POST',
					    data:{
					       live_program_id:this.id
					    },
					    header:{
					        "token":uni.getStorageSync('token')
					    },
					    success: (res) => {
							if (res.data.status == 200) {
								this.likeColor = '#D1AA56'
								this.likeNum ++
							} else{
								uni.showToast({
								    title:res.data.msg,
								    icon:'none',
								    duration:1200
								})
							}
					    }
					})
				}else{
					uni.showToast({
					    title:'您已点赞',
					    icon:'none',
					    duration:1200
					})
				}

			},
			// 请求直播详情
			getLiveDetail(passwrod){
				uni.request({
				    url:'https://fei.feicuikuang.com/index.php/App/Live/attentionLiveInfo',
				    method:'POST',
				    data:{
				       live_program_id:this.id,
					   password:passwrod
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.passWordShow = false
							this.is_get = 1
							this.liveData = res.data.data
							this.likeNum = res.data.data.like_num
							this.GroupId = res.data.data.im_group_id
							if (res.data.data.like_num.is_like_status == 0) {
								this.likeColor = '#fff'
							} else{
								this.likeColor = '#D1AA56'
							}
							if (res.data.data.live_status !== 2) {
								uni.showToast({
									title:'当前直播间已经没有在直播了~',
									icon:'none',
									duration:1200
								})
								setTimeout(()=>{
									uni.switchTab({
										url:'home'
									})
								},1200)
								this.onQuitGroup()
							}
						}else if(res.data.status == 100){
							uni.navigateTo({
								url:'register/register?roomId='+this.id+'&nickName=' + this.nickName+'&avatar='+this.avatar 
							})
						}else if(res.data.msg == '直播间密码错误'){
								this.passWordShow = true
						}else{
							uni.showToast({
								title:'当前直播间已经没有在直播了~',
								icon:'none',
								duration:1200
							})
							setTimeout(()=>{
								uni.switchTab({
									url:'home'
								})
							},1200)
							this.onQuitGroup()
						}
				    }
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.liveRoom{
	padding: 0;
	margin: 0;
	overflow: hidden;
	max-height: 100vh;
	position: relative;
	.password-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 36rpx;
		.title{
			font-size: 26rpx;
			color-interpolation: #999;
			margin-bottom: 20rpx;
		}
		input{
			width: 300rpx;
			border-bottom: 1rpx solid #008577;
		}
		.btm-btn{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			.btn{
				width: 120rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 24rpx;
				border-radius: 15rpx;
			}
			.quxiao{
				background-color: #DD6B55;
			}
			.queding{
				background-color: #6BD505;
				margin-left: 40rpx;
			}
		}
	}
	.notice{
		width: 100vw;
		position: absolute;
		padding: 0 30rpx;
		top: 200rpx;
	}
	.input-txt{
		width: 100%;
		background-color: #fff;
		padding-bottom: var(--status-bar-height);
		padding-top: 35upx;
		.tags-txt{
			width: 100%;
			margin-bottom: 35upx;
			padding: 0 30upx;
			white-space: nowrap;
			padding-right: 30upx;
			.tag-txt{
				display: inline-block;
				font-size: 30upx;
				color: #999;
				padding: 10upx 20upx;
				border-radius: 50upx;
				border: 1upx solid #999;
				margin-right: 10upx;
			}
		}
		input{
			width: 690upx;
			height: 70upx;
			color: #333;
			border: none;
			background-color: #eeeeee;
			border-radius: 30upx;
			margin: 0 auto;
			padding-left: 20upx;
			margin-bottom: 30upx;
		}
	}
	.goods-title{
		height: 90upx;
		display: flex;
		align-items: center;
		color: #333;
		font-size: 32upx;
		background-color: #fff;
		padding-left: 30upx;
	}
	// 弹窗样式
	/deep/.u-drawer-bottom{
		background-color: rgba(0,0,0,0) !important;
	}
	
	.liveRoom-video{
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		margin: 0;
	}
	.liveRoom-box{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 100;
		.header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx;
			.live-data{
				display: flex;
				align-items: center;
				width: 45%;
				background-color: rgba(0,0,0,0.6);
				border-radius: 30upx;
				image{
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					margin-right: 10upx;
					margin-left: 5upx;
				}
				.live-txt{
					color: #fff;
					.live-name{
						font-size: 28upx;
						margin-bottom: 5upx;
					}
					.live-look-num{
						font-size: 22upx;
					}
				}
			}
			.live-btn{
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 30%;
				.tag{
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #fff;
					border: 1upx solid $zhuti-color;
					text:first-child{
						font-size: 24upx;
						background-color: $zhuti-color;
					}
					text:last-child{
						font-size: 22upx;
					}
				}
				.off{
					width: 50upx;
					height: 50upx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 50%;
					background-color: rgba(0,0,0,0);
				}
			}
		}
		.header-plate-2{
			display: flex;
			align-items: center;
			padding: 0 30upx;
			.item{
				height: 50upx;
				border-radius: 30upx;
				background-color: rgba(0,0,0,0.6);
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 15upx;
				margin-right: 10upx;
				.item-txt{
					display: flex;
					align-items: center;
					justify-content: center;
					text{
						margin-left: 15upx;
						font-size: 22upx;
						color: #fff;
						margin-right: 10upx;
					}
				}
			}
		}
		.swiper-box{
			width: 100vw;
			min-height: 970upx;
			position: fixed;
			bottom: var(--status-bar-height);
			left: 0;
			swiper{
				min-height: 970upx !important;
			}
			swiper-item{
				display: flex;
				align-items: flex-end;
			}
			.swiper-item{
				width: 100vw;
				.interact{
					padding: 0 10upx;
					position: relative;
					.goInto{
						position: absolute;
						top: -60upx;
						left: 20upx;
						padding: 5upx 50upx;
						background-color: rgba(255,187,57,0.6);
						border-radius: 30upx;
						transition:all 0.5s;
						-moz-transition:all 0.5s; /* Firefox 4 */
						-webkit-transition:all 0.5s; /* Safari and Chrome */
						-o-transition:all 0.5s; /* Opera */
						.txt{
							font-size: 26upx;
							color: #fff;
							text{
								color: red;
							}
						}
					}
					.message-box{
						max-width: 476upx;
						height: 390upx;
						overflow: scroll;
						.item{
							padding: 10upx;
							background-color: rgba(0,0,0,0.3);
							border-radius: 20upx;
							flex-wrap: wrap;
							margin-bottom: 20upx;
							position: relative;
							image{
								width: 110upx;
								position: absolute;
								top: 10upx;
								left: 10upx;
							}
							text:nth-child(2){
								padding-left: 125upx;
								font-size: 28upx;
								color: $zhuti-color;
								margin-right: 10upx;
								line-height: 50upx;
							}
							text:last-child{
								font-size: 28upx;
								color: #fff;
								line-height: 50upx;
							}
						}
					}
					.btm-box{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.btm-box-img{
							position: relative;
							image{
								width: 92upx;
								height: 92upx;
							}
							.num{
								position: absolute;
								right: 0;
								top: 0;
								width: 30upx;
								height: 30upx;
								border-radius: 50%;
								background-color: red;
								color: #fff;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 22upx;
							}
						}
						.input-box{
							padding: 10upx 20upx;
							background-color: rgba(0,0,0,0.6);
							display: flex;
							align-items: center;
							border-radius: 30upx;
							text{
								margin-left: 20upx;
								font-size: 22upx;
								color: #fff;
							}
						}
						.item-box{
							display: flex;
							align-items: center;
							flex-direction: column;
							justify-content: center;
							.item{
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: rgba(0,0,0,0.6);
								width: 70upx;
								height: 70upx;
								border-radius: 50%;
							}
							text{
								font-size: 22upx;
								color: #fff;
							}
						}

					}
				}
				.strategy{
					.strategy-plate-1{
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						.title{
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 670upx;
							height: 120upx;
							background-color: $zhuti-color;
							border-radius:30upx 30upx 0 0;
							padding: 0 40upx;
							text{
								font-size: 30upx;
								color: #fff;
							}
							.title-right{
								font-size: 26upx;
								color: $zhuti-color;
								padding: 15upx 25upx;
								border-radius: 40upx;
								background-color: #fff;
							}
						}
						.content{
							width: 670upx;
							padding: 30upx;
							font-size: 34upx;
							color: #333;
							background-color: #fff;
						}
						.btm{
							width: 670upx;
							padding: 30upx;
							background-color: #fff;
							border-radius: 0 0 30upx 30upx;
							display: flex;
							align-items: center;
							text{
								color: #666;
							}
						}
					}
					.strategy-plate-2{
						padding:  30upx;
						border-radius: 30upx;
						background-color: #fff;
						width: 670upx;
						margin: 30upx auto;
						.title{
							color: $zhuti-color;
							font-size: 30upx;
							margin-bottom: 30upx;
						}
						.content{
							font-size: 34upx;
							color: #333;
						}
					}
					.strategy-plate-3{
						padding:  30upx;
						border-radius: 30upx;
						background-color: #fff;
						width: 670upx;
						margin: 0 auto;
						.title{
							color: $zhuti-color;
							font-size: 30upx;
							margin-bottom: 30upx;
						}
						.content{
							font-size: 34upx;
							color: #333;
							overflow: hidden;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
						}
					}
				}
			}
		}
	}
	.level-box{
		padding: 30upx 30upx;
		.level-plate-1{
			background-color: #fff;
			border-radius: 20upx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 20upx 30upx;
			.top{
				width: 100%;
				display: flex;
				justify-content: space-between;
				text{
					font-size: 26upx;
					color: #333;
				}
				button{
					font-size: 24upx;
					color: $zhuti-color;
					display: block;
					margin: 0;
				}
			}
			.center{
				display: flex;
				align-items: center;
				image{
					width: 150upx;
					margin-right: 20upx;
				}
				.center-right{
					display: flex;
					flex-direction: column;
					align-items: center;
					text{
						font-size: 22upx;
						color: #999;
						margin-bottom: 15upx;
					}
					.level-num-bg{
						width: 484upx;
						height: 10upx;
						background-color: #888;
						position: relative;
						.level-num{
							background-color: $zhuti-color;
							height: 10upx;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}
			}
		}
		.task-plate-2{
			background-color: #fff;
			border-radius: 20upx;

			margin-top: 20upx;
			max-height: 600upx;
			.scroll-box{
				padding: 30upx 30upx;
				.title{
					font-size: 26upx;
					color: #333;
				}
				.item{
					height: 110upx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1upx solid #eee;
					.item-left{
						display: flex;
						align-items: center;
						image{
							width: 50upx;
							height: 50upx;
							margin-right: 15upx;
						}
						.txt{
							display: flex;
							flex-direction: column;
							text:first-child{
								color: #333;
								font-size: 24upx;
								margin-bottom: 10upx;
							}
							text:last-child{
								color: #999;
								font-size: 22upx;
							}
						}
					}
					.item-right{
						font-size: 26upx;
						color: $zhuti-color;
					}
				}
			}

		}
	}
	.comment-box{
		background-color: #fff;
		border-radius: 20upx 20upx 0 0;
		padding: 30upx;
		.title{
			font-size: 32upx;
			color: #333;
			margin-bottom: 40upx;
		}
		.tags{
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.tag-item{
				padding: 12upx 40upx;
				background-color: #e4e4e4;
				font-size: 22upx;
				color: #999;
				border-radius: 30upx;
				margin-bottom: 20upx;
				margin-right: 20upx;
			}
			.tag-item-active{
				color: #fff;
				background-color: $zhuti-color;
			}
		}
		.comment-list{
			height: 600upx;
			.comment-item{
				border-bottom: 10upx solid #f7f7f7;
				padding: 30upx 0;
				.item-top{
					display: flex;
					align-items: center;
					image{
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
						margin-right: 20upx;
					}
					text{
						font-size: 22upx;
						color: #444;
						margin-right: 30upx;
					}
					
				}
				.item-center{
					margin-top: 40upx;
					margin-bottom: 25upx;
					font-size: 24upx;
					color: #333;
				}
				.goods{
					width: 100%;
					background-color: #f7f7f7;
					display: flex;
					align-items: center;
					height: 140upx;
					image{
						width: 135upx;
						height: 140upx;
					}
					.goods-name{
						height: 140upx;
						padding: 20upx;
						text{
							font-size: 26upx;
							color: #333;
						}
					}
				}
			}
		}
	}
	.goods-box{
		height: 900upx;
		background-color: #fff;
		.item{
			width: 710upx;
			height: 333upx;
			background-color: #fff;
			border-radius: 10upx;
			display: flex;
			align-items: center;
			margin-bottom: 20upx;
			image{
				width: 260upx;
				height: 260upx;
				margin-right: 24upx;
				margin-left: 24upx;
			}
			.item-right{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				width: 410upx;
				.name{
					font-size: 28upx;
					color: #000;
					font-weight: 600;
					margin-bottom: 8upx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				} 
				.desc{
					font-size: 23upx;
					color: #7f7f7f;
					margin-bottom: 8upx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
				}
				.tags{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-bottom: 20upx;
				}
				.old-price{
					font-size: 18upx;
					color: #999;
					text-decoration: line-through;
					margin-bottom: 5upx;
				}
				.goods-btm{
					display: flex;
					align-items: center;
					justify-content: space-between;
					 text{
						 font-size: 24upx;
						 font-weight: 600;
						 color: #c11800;
					 }
					 .goods-btm-right{
						 display: flex;
						 align-items: center;
						 image{
							 width: 53upx;
							 margin-right: 14upx;
						 }
						 button{
							 padding: 0upx 30upx;
							 
							 font-size: 22upx;
							 font-weight: 500;
							 display: flex;
							 align-items: center;
							 justify-content: center;
						 }
					 }
				}
			}
		}
	}
}
</style>
